<template>
	<view class="content">
		<u-search :show-action="true" action-text="搜索" :animation="true" @search="search"></u-search>
		<view class="container">
			<!-- 商品列表 -->
			<u-swipe-action v-for="(item, index) in goodsList" :key="item.id" :index="index" :options="swipeOptions"
				@click="handleDelete">
				<view class="goods-item">
					<!-- 商品图片 -->
					<u-image :src="item.image" width="200rpx" height="200rpx" radius="8"></u-image>

					<!-- 商品信息 -->
					<view class="goods-info">
						<!-- 商品名称 -->
						<text class="goods-title">{{ item.prodName }}</text>

						<!-- 商品标签 -->
						<view class="tags">
							<u-tag v-for="(tag, tagIndex) in item.prodSpec" :key="tagIndex" :text="tag"
								type="error" size="mini" shape="circle" class="tag" />
						</view>

						<view class="price-line" style="justify-content: space-between;width: 100%;">
							<text class="price">¥{{ item.price.toFixed(2) }}</text>
							<u-number-box v-model="item.quantity" :min="0" integer></u-number-box>
						</view>
					</view>
				</view>
			</u-swipe-action>
			<u-empty text="暂无数据" mode="list" v-if="goodsList.length === 0"></u-empty>
		</view>
		<view class="btn" @click="saleConfirm">下单</view>
		<u-popup v-model="showPopup" mode="bottom" :mask-close-able="true" height="60%" border-radius="20">
			<view class="popup-content">
				<!-- 标题栏 -->
				<view class="header">
					<text class="title">商品列表</text>
					<u-icon name="close" color="#999" size="24" @click="showPopup = false"></u-icon>
				</view>

				<!-- 商品列表 -->
				<scroll-view scroll-y class="goods-list">
					<view :class="['goods-item',{'checked': item.choose}]" v-for="(item, index) in goodsPopList" :key="index" @click="chooseItem(item)">
						<image class="goods-image" :src="item.image" mode="aspectFill"></image>
						<view class="goods-info">
							<text class="goods-name">{{ item.prodName }}</text>
							<view class="specs">
								<text class="spec-item" v-for="(spec, sIndex) in item.specs" :key="sIndex">
									{{ spec }}
								</text>
							</view>
							<view class="price-line">
								<text class="price">¥{{ item.price.toFixed(2) }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<u-button type="primary" @click="chooseGoods">确定</u-button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				// 滑动操作配置
				swipeOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				goodsPopList: [{
						image: "/static/images/goods1.jpg",
						prodName: "男士纯棉T恤",
						price: 89.9,
						prodSpec: ["白色", "L码"],
						choose: false,
						quantity: 0
					},
					{
						image: "/static/images/goods2.jpg",
						prodName: "女士休闲运动鞋",
						price: 199.0,
						prodSpec: ["黑色", "38码"],
						choose: false,
						quantity: 0
					},
					{
						image: "/static/images/goods2.jpg",
						prodName: "女士休闲运动鞋",
						price: 199.0,
						prodSpec: ["黑色", "38码"],
						choose: false,
						quantity: 0
					},
					{
						image: "/static/images/goods2.jpg",
						prodName: "女士休闲运动鞋",
						price: 199.0,
						prodSpec: ["黑色", "38码"],
						choose: false,
						quantity: 0
					},
					// 更多商品数据...
				],
				// 商品列表数据
				goodsList: [],
				orderMainObj: null
			};
		},
		onLoad(params) {
			console.log(params);
			this.orderMainObj = params;
		},
		methods: {
			// 删除商品
			handleDelete(index) {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该商品吗',
					success: function (res) {
						if (res.confirm) {
							_this.goodsList.splice(index, 1)
							_this.$u.toast('删除成功')
							return Promise.resolve()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			search(e){
				console.log(e);
				this.showPopup = true;
				this.$api.user.getProdList({
					prod: e
				}).then(res => {
					console.log(res);
					this.goodsPopList = [];
					res.forEach((item) => {
						this.goodsPopList.push({
							image: "/static/images/goods2.jpg",
							...item,
							price: Number(item.dbiz1) || 0,
							choose: false,
							quantity: 0
						})
					})
				})
			},
			chooseGoods(){
				this.goodsList = this.goodsPopList.filter(item => item.choose)
				this.showPopup = false
			},
			chooseItem(item){
				item.choose = !item.choose
			},
			saleConfirm() {
				let crmJxcSalesdtls = [];
				
				this.goodsList.forEach((item) => {
					if(Number(item.quantity) > 0){
						crmJxcSalesdtls.push({
							"prodCode": item.prodCode,
							"prodName": item.prodName,
							"prodSpec": item.prodSpec,
							"price": item.price,
							"qty": item.quantity,
							
							"prodLength": item.prodLength,
							"prodWidth": item.prodWidth,
							"salesDate": this.orderMainObj.orderTime.substring(0,10),
							"deliverTime": this.orderMainObj.orderTime,
							"saleamt": (Number(item.price) * Number(item.quantity)).toFixed(2)
						})
					}
				})
				if(crmJxcSalesdtls.length === 0){
					this.$u.toast('商品数量不能为0')
					return
				}
				console.log(crmJxcSalesdtls);
				this.$api.user.addCrmJxcSales({
					"custCode": this.orderMainObj.custId,
					"custName": this.orderMainObj.custId,
					"billType": "sa",
					"crmJxcSalesdtls": crmJxcSalesdtls
				}).then((res) => {
					this.$u.toast('下单成功')
					uni.navigateBack();
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		height: calc(100vh - 110rpx);
	}

	.container {
		padding: 20rpx;
		height: calc(100% - 220rpx);
		overflow-y: auto;
	}

	.goods-item {
		display: flex;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border-bottom: 1px solid #f5f5f5;
		width: 100%;
		.goods-info {
			flex: 1;
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 420rpx;
			.goods-title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 15rpx;
			}

			.tags {
				margin-bottom: 20rpx;

				.tag {
					margin-right: 10rpx;
				}
			}

			.price {
				font-size: 36rpx;
				color: #e64340;
				font-weight: bold;
			}
		}
	}

	.btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-color: #e64340;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	::v-deep .u-swipe-action {
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.popup-content {
		padding: 20rpx;
		height: calc(100% - 80rpx);
		width: 100%;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.goods-list {
			height: calc(100% - 100rpx);

			.goods-item {
				display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f5f5f5;

				.goods-image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
				}

				.goods-info {
					flex: 1;
					margin-left: 20rpx;

					.goods-name {
						font-size: 28rpx;
						color: #333;
						line-height: 1.4;
					}

					.specs {
						margin: 10rpx 0;

						.spec-item {
							display: inline-block;
							padding: 4rpx 12rpx;
							margin-right: 10rpx;
							background: #f5f5f5;
							border-radius: 6rpx;
							font-size: 24rpx;
							color: #666;
						}
					}

					
				}
			}
			.checked{
				background-color: #f1f1f1;
			}
		}
	}
	.price-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
	
		.price {
			color: #e64340;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>